<template>
  <!-- 详情 弹出框 -->
  <el-dialog :title="dialogTitle" style="top: 8%" :visible.sync="visible" width="1000px" append-to-body>
    <div style="margin-top: -20px">
      <el-table v-loading="loading" :data="tableList">
        <el-table-column label="工号/学号" align="center" prop="studentId" />
        <el-table-column label="姓名" align="center" prop="userName" />
        <el-table-column label="时间" align="center" prop="loginTime" />
        <el-table-column label="IP" align="center" prop="ipaddr" />
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <span>{{ scope.row.status === '0' ? '成功' : '失败' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </el-dialog>
</template>

<script>
  import { getAppAuthList } from './service'
  export default {
    name: 'AppAuthDetails',
    props: ['currentRow'],
    data() {
      return {
        dialogTitle: '认证详情', // todo 要求显示应用名称: 示例: 教师工资系统认证详情
        // 遮罩层
        visible: false,
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 表格数据
        tableList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        }
      }
    },
    watch: {
      currentRow: {
        //深度监听，可监听到对象、数组的变化
        handler(val, oldVal) {
          this.queryParams.logtype = val.id
          this.getList()
        },
        deep: true //true 深度监听
      }
    },
    methods: {
      // 显示弹框
      show() {
        // this.getList()
        this.visible = true
      },
      /** 查询列表 */
      getList() {
        if (!Object.keys(this.currentRow).length) {
          return
        }
        this.loading = true
        getAppAuthList(this.queryParams)
          .then(response => {
            this.tableList = response.rows
            this.total = response.total
          })
          .finally(() => {
            this.loading = false
          })
      }
    }
  }
</script>
